<template>
  <div>
    <Card>
      <Button
        type="primary"
        @click="add(0)"
        style="margin-bottom: 20px"
        v-if="userInfo.companyType == 2 || userInfo.companyType == 3"
        >添加商品</Button
      >
      <Form ref="formValidate" :model="formValidate" :label-width="80" inline>
        <Form-item label="商品">
          <Input
            v-model="formValidate.productName"
            placeholder="请输入商品名称"
          ></Input>
        </Form-item>
        <Form-item label="商品分类">
          <Cascader
            :data="cateList"
            :load-data="loadData"
            change-on-select
            @on-change="changeCate"
          ></Cascader>
        </Form-item>
        <Form-item label="商品状态" prop="productStatus">
          <Select
            v-model="formValidate.productStatus"
            placeholder="请选择商品状态"
          >
            <Option value="1">火爆</Option>
            <Option value="2">售罄</Option>
          </Select>
        </Form-item>
           <Form-item label="上架状态" prop="isShow">
          <Select
            v-model="formValidate.isShow"
            placeholder="请选择商品上架状态"
          >
            <Option value="1">上架</Option>
            <Option value="0">下架</Option>
          </Select>
        </Form-item>
        <Form-item>
          <Button type="primary" @click="getlist()">搜索</Button>
            <Button @click="handleReset">重置</Button>
        </Form-item>
      </Form>
    </Card>
    <div class="list">
      <div v-for="item in list" :key="item.id">
        <div class="type">{{ item.title }}</div>
        <div class="wrap">
          <div class="item" v-for="item1 in item.products" :key="item1.id">
            <div class="image">
              <img :src="item1.image" alt="" />
              <div class="tagwrap">
                <Tag color="error" v-if="item1.isHot == 1">火爆</Tag>
                <Tag color="volcano" v-if="item1.isSoldOut == 1">缺货</Tag>
                <Tag color="success" v-if="item1.isRecommand == 1">推荐</Tag>
              </div>
            </div>
            <div class="content">
              <div class="name">{{ item1.storeName }}</div>
              <!-- <div class="desc">{{ item1.storeInfo }}</div> -->
              <div style="display: flex; justify-content: space-between">
                <span class="price">￥{{ item1.price }}</span>
                <span>库存：{{ item1.stock }}</span>
              </div>
              <div class="tag">
                <Tag
                  color="primary"
                  v-if="item1.isSoldOut == 0"
                  style="cursor: pointer"
                   @click.native="setStatus(item1, 2)"
                  >售罄</Tag
                ><Tag
                  color="error"
                  v-if="item1.isSoldOut == 1"
                  style="cursor: pointer"
                  @click.native="setStatus(item1, 2)"
                  >取消售罄</Tag
                >
                <Tag
                  color="primary"
                  style="cursor: pointer"
                  @click.native="setStatus(item1, 1)"
                  >{{ item1.isShow == 0 ? "上架" : "下架" }}</Tag
                >
                <Tag
                  color="primary"
                  style="cursor: pointer"
                  @click.native="edit(item1)"
                  >{{ '编辑' }}</Tag
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Modal
      v-model="showEdit"
      :title="title"
      @on-ok="ok"
      @on-cancel="cancel"
      width="800"
    >
      <add-edit
        v-if="showEdit && userInfo.companyType == 2"
        @handleSubmit="handleSubmit"
        :formData="currentData"
      ></add-edit>
      <add-edit-course
        v-if="showEdit && userInfo.companyType == 3"
        @handleSubmit="handleSubmit"
          :formData="currentData"
      ></add-edit-course>
      <div slot="footer"></div>
    </Modal>
  </div>
</template>

<script>
import addEdit from "./addEdit.vue";
import addEditCourse from "./addEditCourse.vue";
import {
  scProductGgetByProductSearchVo,
  scProductTypegetByParentId,
  scProductUpdateSoldOutStatus,
  scProductUpdateShowStatus,
} from "@/api/index";
export default {
  data() {
    return {
      currentData:{},
      title: "添加商品",
      showEdit: false,
      formValidate: { companyId: localStorage.getItem("companyId") },
      companyId: localStorage.getItem("companyId"),
      cateList: [],
      selectCate: [],
      userInfo: JSON.parse(localStorage.getItem("userInfo")),
      list: [],
    };
  },
  mounted() {
    this.initgetCateList(0);
    this.getlist();
  },
  components: {
    addEdit,
    addEditCourse,
  },
  methods: {
     handleReset() {
       this.formValidate ={ companyId: localStorage.getItem("companyId") }
      // 重新加载数据
      this.getlist();
    },
    setStatus(item, type) {
      console.log("type:",type)
      if (type == 1) {
        //上下架
        this.$Modal.confirm({
          title: "提示",
          content:
            item.isShow == 0
              ? "确定要修改为上架状态？"
              : "确定要修改为下架状态？",
          onOk: () => {
            scProductUpdateShowStatus({
              id: item.id,
              status: item.isShow == 0 ? 1 : 0,
            }).then((res) => {
              if (res.code == 200) {
                this.$Message.success("修改成功")
                this.getlist();
                this.$Modal.remove();
              }
            });
          },
          onCancel: () => {
            //  this.$Message.info('Clicked cancel');
          },
        });
      } else if (type == 2) {
        //售罄状态修改
        this.$Modal.confirm({
          title: "提示",
          content:
            item.isSoldOut == 0
              ? "确定要修改售罄状态？"
              : "确定要取消售罄状态？",
          onOk: () => {
            scProductUpdateSoldOutStatus({
              id: item.id,
              status: item.isSoldOut == 0 ? 1 : 0,
            }).then((res) => {
              if (res.code == 200) {
                 this.$Message.success("修改成功")
                this.getlist();
                this.$Modal.remove();
              }
            });
          },
          onCancel: () => {
            //  this.$Message.info('Clicked cancel');
          },
        });
      }
    },
    handleSubmit() {
      this.showEdit = false;
      this.getlist();
    },
    add() {
      this.currentData = {}
      this.showEdit = true;
    },
    edit(item){
      this.currentData = item;
      this.showEdit = true;
    },
    getlist() {
      scProductGgetByProductSearchVo({
        ...this.formValidate,
        productTypeId: this.selectCate[this.selectCate.length - 1],
      }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.list = res.result;
        }
      });
    },
    changeCate(e) {
      console.log(e);
      this.selectCate = e;
    },
    initgetCateList(parentId) {
      scProductTypegetByParentId({
        companyId: this.companyId,
        parentId: parentId,
      }).then((res) => {
        console.log("懒加载");
        if (res.code == 200) {
          let data = res.result.map((item) => {
            item.label = item.title;
            item.value = item.id;
            if (item.isParent) {
              item.children = [];
              item.loading = false;
            }
            return item;
          });
          this.cateList = data;
        }
      });
    },
    loadData(item0, callback) {
      item0.loading = true;
      scProductTypegetByParentId({
        companyId: this.companyId,
        parentId: item0.id,
      }).then((res) => {
        console.log("懒加载");
        if (res.code == 200) {
          let data = res.result.map((item) => {
            item.label = item.title;
            item.value = item.id;
            if (item.isParent) {
              item.children = [];
              item.loading = false;
            }
            return item;
          });
          item0.children = data;
          item0.loading = false;
          callback();
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
.list {
  .type {
    font-size: 16px;
    font-weight: bold;
  }
  .wrap {
    display: flex;
    flex-wrap: wrap;
  }
  .item {
    width: 300px;
    background: #fff;
    margin-right: 20px;
    border-radius: 7px;
    overflow: hidden;
    margin-bottom: 20px;
    &:hover {
      box-shadow: 0 0 5px 2px #e3e3e3;
      transform: scale(1.01,1.01);
      
    }
    .image {
      width: 100%;
      height: 200px;
      overflow: hidden;
      position: relative;
      img {
        width: 100%;
        min-height: 100%;
      }
      .tagwrap {
        position: absolute;
        right: 0;
        top: 10px;
        z-index: 1;
      }
    }
    .content {
      padding: 0 5px 5px;
      .name {
        margin: 5px 0;
        font-weight: bold;
      }
      .desc {
        color: #999;
      }
      .price {
        font-size: 16px;
        font-weight: bold;
        color: rgb(202, 33, 33);
      }
      .tag {
        text-align: right;
      }
    }
  }
}
</style>